<script setup>
import { ref } from 'vue';
import { userStore } from '@/stores/userStore';
import { useRouter } from 'vue-router';
const useuserStore = userStore();
const router = useRouter();

const username = ref("");
const password = ref("");
const form1 = ref(null);
const loading = ref(false);
const errorMessage = ref("");

const loginForm = async () => {
    if (!username.value) {
    alert("请输入用户名");
    return;
  }
  if (!password.value) {
    alert("请输入密码");
    return;
  }
  loading.value = true;
  errorMessage.value = "";

  try {
    await new Promise(resolve => setTimeout(resolve, 1000));
    if (username.value === "张三" && password.value === "123456") {
      const userData = {
        username: username.value,
        gender: '男',
        post: '软件工程师',
        sign: '这个人很懒，什么也没留下'
      };
      
      useuserStore.login(userData);
      router.push('/person');
    } else {
      throw new Error('用户名或密码错误');
    }
  } catch (error) {
    errorMessage.value = error.message || '登录失败';
  } finally {
    loading.value = false;
  }
};

const resetForm = () => {
  username.value = "";
  password.value = "";
  errorMessage.value = "";
};
</script>

<template>
  <el-row>
    <el-col :md="24" :lg="8"></el-col>
    <el-col :md="24" :lg="8">
      <h1>登录</h1>
      <el-form ref="form1" style="max-width: 600px" label-width="auto">
        <el-form-item label="用户名">
          <el-input v-model="username" placeholder="username" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="password" placeholder="password" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loginForm" :loading="loading">
            登录
          </el-button>
          <el-button type="primary" @click="resetForm">
            取消
          </el-button>
        </el-form-item>
        <el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon />
      </el-form>
    </el-col>
    <el-col :md="24" :lg="8"></el-col>
  </el-row>
</template>

<style scoped>
/* .el-row {
  margin-top: 60px;
  display: flex;
  justify-content: center;
}

h1 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 28px;
  color: #333;
  font-weight: normal;
}

.el-form {
  margin: 0 auto;
  padding: 40px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 100%;
  box-sizing: border-box;
}

.el-form-item {
  margin-bottom: 28px;
}

.el-form-item__label {
  font-size: 16px;
  color: #606266;
  padding-bottom: 10px;
  display: block;
}

.el-input {
  margin-top: 10px;
}

.el-form-item:last-child {
  margin-top: 40px;
  text-align: center;
}

.el-button {
  width: 120px;
  height: 42px;
  font-size: 16px;
}

.el-button + .el-button {
  margin-left: 20px;
} */
</style>